<template>
    <QueryBase @onSearch="doQuery" @onAdd="handleAdd">
        <template #search>
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item :label="t('专家名称')">
                    <el-input v-model="queryForm.name" placeholder="请输入" clearable v-enter="doQuery" />
                </el-form-item>
                <el-form-item :label="t('专家专业')">
                    <el-input v-model="queryForm.major" placeholder="请输入" clearable v-enter="doQuery" />
                </el-form-item>
                <el-form-item :label="t('专家职级')">
                    <el-input v-model="queryForm.title" placeholder="请输入" clearable v-enter="doQuery" />
                </el-form-item>
            </el-form>
        </template>
        <el-table :data="tableData" :border="true" header-row-class-name="table-header" height="60vh">
            <el-table-column prop="name" :label="t('姓名')" width="180" />
            <el-table-column prop="major" :label="t('专业')" width="180" />
            <el-table-column prop="title" :label="t('职级')" width="180" />
            <el-table-column prop="originImg" :label="t('头像')" width="120">
                <template #default="scope">
                    <v-image :src="scope.row.originImg" :style="{ width: '45px', height: '45px' }"
                        :disabled="true"></v-image>
                </template>
            </el-table-column>
            <el-table-column prop="introduction" :label="t('简介')">
                <template #default="scope">
                    <el-tooltip class="box-item" effect="dark" :content="scope.row.introduction" placement="top-start">
                        <span>{{ showDesc(scope.row.introduction) }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column :label="t('操作')" width="180">
                <template #default="scope">
                    <div style="display: flex;" v-if="action('edit')">
                        <el-button type="text" @click="handleModify(scope.row)">修改</el-button>
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="expert-result-pn">
            <VPageNavigation :total="total" @on-size-changed="handleSizeChange" @on-page-changed="handleCurrentChange">
            </VPageNavigation>
        </div>
    </QueryBase>

    <ExpertEditor @onSubmited="(data) => { doQuery() }" v-model:show="showEditor" :mode="mode" :data="editModel">
    </ExpertEditor>
</template>
<script setup lang="ts">
import { Ref, onMounted, reactive, ref, watch } from 'vue';
import { t } from '@/common/locale'
import { deleteBy, queryList } from '@/api/expert';
import { Sysinfo } from '@/common/config';
import QueryBase from '@/components/layout/QueryBase.vue';
import elHelper from '@/common/elHelper';
import VImage from '@/components/other/VImage.vue';
import ExpertEditor from '@/components/expert/ExpertEditor.vue';
import VPageNavigation from '@/components/other/VPageNavigation.vue';
import { action } from '@/common/actionHelper';


const queryForm: ExpertQueryForm = reactive({
    name: '',
    major: '',
    title: ''
})
const page = ref(1)
const pageSize = ref(Sysinfo.PageSize)
const tableData: Ref<ExpertDataModel[]> = ref([])
const total = ref(0)
const mode = ref('add')
const editModel: ExpertDataModel = reactive({})
const showEditor = ref(false)

const doQuery = async () => {
    if (!action('view')) {
        elHelper.showErrorMsg('权限不足')
        return
    }
    const loading = elHelper.showLoading()
    const re = await queryList({
        name: queryForm.name,
        title: queryForm.title,
        major: queryForm.major,
        pageSize: pageSize.value,
        to: page.value
    })
    if (re.isSuccess) {
        tableData.value = re.data || []

        total.value = re.totalRow || 0
        page.value = re.pageNum || 1
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}
const showDesc = (val: string) => {
    if (val && val.length > 50) {
        return val.substring(0, 50) + '...'
    } else {
        return val
    }
}
const handleSizeChange = (val: number) => {
    pageSize.value = val
    doQuery()
}
const handleCurrentChange = (val: number) => {
    page.value = val
    doQuery()
}
const handleAdd = () => {
    editModel.introduction = ''
    editModel.name = ''
    editModel.major = ''
    editModel.title = ''
    editModel.objectId = ''
    editModel.title = ''
    editModel.originImg = ''
    editModel.thumbImg = ''
    mode.value = 'add'
    showEditor.value = true
}
const handleModify = (data: ExpertDataModel) => {
    Object.assign(editModel, data)
    mode.value = 'modify'
    showEditor.value = true
}
const handleDelete = async (data: ExpertDataModel) => {
    if (!await elHelper.showConfirmMsg('确定要删除吗?(删除后将无法恢复)')) return
    let loading = elHelper.showLoading()
    const re = await deleteBy(data)
    if (re.isSuccess) {
        elHelper.showSuccessMsg('操作成功')
        await doQuery()
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}
onMounted(() => {
    doQuery()
})

</script>
<style scoped lang="scss">
.expert-result-pn {
    padding-top: 15px;
    display: flex;
    justify-content: flex-end;
}
</style>